<script setup lang="ts">
import {ref} from 'vue'
import {queryArticleList} from '@/api/index'
import { useAsyncData } from '#app';
import {ElMessage } from 'element-plus'

const activeName = 'first';
const baseUrl = 'http://localhost:9002/qcy-blog'
const queryFrom = ref({
  pageNo:1,
  pageSize:10,
  categoryId:''
})
const totalPage = ref(0)
const list = ref([]);
const { data,refresh } = await useAsyncData('queryFriendLinkList', () => {
  return $fetch(baseUrl+'/frontend/friendLink/list',{
    query:queryFrom.value
  });
});
if(!data.value){
  refresh();
}

list.value = data.value.result



onMounted(() => {

});


</script>

<template>
  <div class="home">
    <div class="content">
      <div class="title">
        <h3>友情链接</h3>
      </div>
      <div class="links flex">

        <div class="item flex alignCenter between"
             v-for="item in list" :key="item.id">
          <img  :src="item.avatar"
                     class="friend-link-cover"

                     v-if="!$device.isMobile"

          />
          <div class="info flex column center">
            <div class="name">
              <nuxt-link target="_blank" :href="item.url"> {{item.name}}</nuxt-link>
            </div>
            <div class="desc">
              {{item.info}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home{
  margin-top: 20px;
  .content{
    width: 65%;
    min-height:400px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
    .links{
        flex-wrap: wrap;
      .item{
        width: 200px;
        height: 80px;
        overflow: hidden;
        margin: 10px;
        border-radius: 10px;
        border: 1px solid #eee;
        padding: 10px;
        .friend-link-cover{
          width: 40px;
          height: 40px;
          border-radius: 100%;
          margin-right: 10px;
        }
        .info{
          width: calc(100% - 60px);
          height: 100%;
          .name{
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
          }
          .desc{
            font-size: 14px;
            white-space: nowrap;         /* 不换行 */
            overflow: hidden;            /* 隐藏超出部分 */
            text-overflow: ellipsis;     /* 显示省略号 */
          }
        }
      }
    }
  }
}
@media screen and (max-width: 750px){

}
@media screen and (max-width: 1118px){

}
</style>
